<template>
  <!-- 头部 -->
  <div class="question-box">
    <div class="head-box">
      <!-- 用户1 -->
      <div class="user-one" v-if="myInfo" @transitionend="animationStep2" :class="{headIn:showHead,endStyle:showResult,success:gameResult.myScore>gameResult.otherScore&&questionIndex >= 4&&showResult,fail:gameResult.myScore<gameResult.otherScore&&questionIndex >= 4&&showResult}">
        <div class="info" v-if="showResult">
          <div class="name-ans">{{myInfo.basicInfo.nickName}}</div>
          <div class="score" v-if="showResult">{{gameResult.myScore}}分</div>
        </div>
        <div class="name-ans-l" v-if="!showResult">{{myInfo.basicInfo.nickName}}</div>
        <img class="photo-one" :src="myInfo.basicInfo.avatarUrl" alt="">
        <!-- 答题记录 -->
        <div class="ans-list" v-if="showResult">
          <div class="ans-item" :class="{ans0:item==0,ans1:item==1,ans2:item==2}" v-for="(item,index) in myAnsList" :key="index"></div>
        </div>
      </div>
      <!-- 用户2 -->
      <div class="user-two" v-if="otherInfo" :class="{headIn:showHead,endStyle:showResult,success:gameResult.myScore<gameResult.otherScore&&questionIndex >= 4&&showResult,fail:gameResult.otherScore<gameResult.myScore&&questionIndex >= 4&&showResult}">
        <img v-if="otherInfo.boot" class="photo-two" :src="IMGHEAD+otherInfo.basicInfo.avatarUrl" alt="">
        <img v-else class="photo-two" :src="otherInfo.basicInfo.avatarUrl" alt="">
        <div class="name-ans-r" v-if="!showResult">{{otherInfo.basicInfo.nickName}}</div>
        <div class="info" v-if="showResult">
          <div class="name-ans">{{otherInfo.basicInfo.nickName}}</div>
          <div class="score" v-if="showResult">{{gameResult.otherScore}}分</div>
        </div>
        <div class="ans-list" v-if="showResult">
          <div class="ans-item" :class="{ans0:item==0,ans1:item==1,ans2:item==2}" v-for="(item,index) in otherAnsList" :key="index"></div>
        </div>
      </div>
      <!-- canvas 机器时期 showTime-->
      <div class="round-cvs" v-if="showTime" @animationend="animationStep1">
        <timeCount :initBtn="initTimeCount" :startBtn="startTimeCount" :stopBtn="stopTimeCount" :initTime="initTime"></timeCount>
      </div>

    </div>
    <div class="main-conent">
      <!-- 答題畫面信息 -->
      <!-- showAnsList -->
      <div v-if="showAnsList">
        <answerList :myScore="myScore" :netWork="isReLink" :oldGame="oldGame" :initTime="newTime" :canNext="canNext" :otherScore="otherScore" :questionList="subjectList" @questionOk="questionOk" @success="answerSuccess" @fail="answerFail" @ansTimeOut="ansTimeOut" @ansStart="ansStart" @nextQuestion="sendNext" :currentIndex="questionIndex">
        </answerList>
      </div>
      <!-- showResult 结局页面 -->
      <div class="result" v-if="showResult">
        <div class="cycle-bg">
          <img class="cycle-img" src="/static/cycle-bg.png" alt="">
          <div class="rect rect-1" :class="{hideAnimate:step2}" @animationend="step3=true"></div>
          <div class="rect rect-2" :class="{hideAnimate:step3}" @animationend="step4=true"></div>
          <div class="rect rect-3" :class="{hideAnimate:step4}" @animationend="getResult"></div>
          <div class="rect rect-4" :class="{hideAnimate:step1}" @animationend="step2=true"></div>
          <!-- 成功失败平局处理 -->
          <img class="word-sh" :class="{shActive:resultType=='胜利'}" src="/static/sheng.png" @transitionend="cw>0?showCv=true:showGift=true;">
          <img class="word-l" :class="{lActive:resultType=='胜利'}" src="/static/li.png">
          <!-- 连胜 -->
          <div class="cv" :class="{cvActiv:showCv&&resultType=='胜利'}" @transitionend="showCv2=true">
            <img src="/static/fire.png" alt="">
            <div class="cv-number">{{cw}}</div>
          </div>
          <img class="cv2" :class="{cv2Activ:showCv2&&resultType=='胜利'}" src="/static/liansheng.png" @transitionend="showGift=true">
          <!-- 平局 -->
          <img class="word-p" :class="{pActive:resultType=='平局'}" src="/static/ping.png" @transitionend="showGift=true">
          <img class="word-j" :class="{jActive:resultType=='平局'}" src="/static/ju.png">

          <!--失败 -->
          <img class="word-s" :class="{pActive:resultType=='失败'}" src="/static/shi.png" @transitionend="showGift=true">
          <img class="word-b" :class="{bActive:resultType=='失败'}" src="/static/bai.png">
        </div>
        <div class="gift" :class="{giftActive:showGift}" @transitionend="showGiftDetail=true">
          <div class="line"></div>
          <div class="g-word">奖励</div>
          <div class="line"></div>
        </div>
        <div class="gift-detail" :class="{giftDetailActive:showGiftDetail}" @transitionend="showBtn=true">
          <div class="gold">
            <img src="/static/gold.png" alt=""> +{{giftGold}}
          </div>
          <div class="exp">
            <img src="/static/exp.png" alt=""> +10
          </div>
        </div>

        <div class="btn-box">
          <div class="btn-game green" :class="{btnActive:showBtn}" @click="reStart">
            再玩一局
          </div>
          <div v-if="!oRun" class="btn-back" :class="{btnActive:showBtn}" @click="toEntry">
            本局回顾
          </div>
        </div>
        <div class="advice" :class="{giftDetailActive:showBtn}" @click="showModal=true">
          <img src="/static/advice.png"> 举报
        </div>

      </div>
      <!-- 举报弹框 -->
      <div class="advice-modal" v-if="showModal">
        <div class="mask"></div>
        <div class="modal">
          <div class="close" @click="showModal = false"></div>
          <div class="head">举报玩家</div>
          <div class="content">请您选择相应的举报类型,我们会尽快审查和处理,您的反馈是对我们最大的支持。</div>
          <div class="select-item" v-for="(item,index) in selectList" :key="index" @click="selectAdvice(item)">
            <div class="select-box">
              <img v-if="adviceType==item.type" src="/static/gou.png" alt="">
            </div>
            {{item.text}}
          </div>
          <div class="advice-submit" @click="submitAdvice">提交</div>
        </div>
      </div>
    </div>
    <!-- 升星 动画 -->

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import timeCount from "./timeCount";
import answerList from "./answerList";
let dataStack = [];
export default {
  props: ["subjectList", "userList", "otherAns", "gameOver", "up","oldGame","netWork"],
  components: {
    timeCount,
    answerList
  },
  computed: {
    ...mapState([
      "appInfo",
      "IMGHEAD",
      "userOneState",
      "userTwoState",
      "cw",
      "isRank"
    ])
  },
  data() {
    return {
      first: true,
      showTime: false,
      showAnsList: false,
      showResult: false,
      questionIndex: 0, //控制题目的选项
      myInfo: null,
      myScore: null, //我的分数
      otherInfo: null,
      otherScore: null, //他人答题,
      resetBtn: false, //reset count
      initTimeCount: false, //初始化计时器
      startTimeCount: false, //开始化计时器
      stopTimeCount: false, //停止化计时器
      canNext: false,
      gameResult: {
        otherScore: 0,
        myScore: 0
      },
      resultType: "",
      oRun: false,
      // d动效相关控制
      gameStop: false,
      showHead: false,
      audio: {},
      myAnsList: [0, 0, 0, 0, 0], //我的回答集 0 超时未答，1 正确 2 错误
      otherAnsList: [0, 0, 0, 0, 0], //回答集
      //结果动画
      rectList: [true, true, true, true],
      showCycle: false,
      step1: false,
      step2: false,
      step3: false,
      step4: false,
      showCv: false,
      showCv2: false,
      showGift: false,
      showGiftDetail: false,
      showBtn: false,
      selectList: [
        {
          type: "1",
          text: "对方疑似作弊"
        },
        {
          type: "2",
          text: "对方头像和昵称违规"
        }
      ],
      adviceType: "1", //举报类型
      showModal: false,
      // 奖励
      giftGold: 10,
      initTime:10,//初始时间为10S
      isReLink:false,
      newTime:0,
    };
  },
  watch: {
    netWork(){
      console.log('network change')
      this.getCurrentQuetion();
      this.isReLink=true;
    },
    up() {
      this.showResult = true;
      this.showCycle = true;
      this.step1 = true;
      if (this.gameResult.myScore > this.gameResult.otherScore) {
        this.audio.play();
      }
    },
    otherAns(list) {
      if (list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].uid != this.appInfo.userId) {
            this.otherScore = list[i];
            if (list[i].timeout) {
              this.otherAnsList[this.questionIndex] = 0; //超时
            } else {
              if (list[i].right) {
                this.otherAnsList[this.questionIndex] = 1; //回答正确
              } else {
                this.otherAnsList[this.questionIndex] = 2; //回答错误
              }
            }
            this.setUserTwoState(true); //收到S端 B用户数据
          }

          if (list[i].uid == this.appInfo.userId) {
            this.myScore = list[i];
            if (list[i].timeout) {
              this.myAnsList[this.questionIndex] = 0; //超时
            } else {
              if (list[i].right) {
                this.myAnsList[this.questionIndex] = 1; //回答正确
              } else {
                this.myAnsList[this.questionIndex] = 2; //回答错误
              }
            }
            this.setUserOneState(true); // 收到S端 A用户数据
          }
        }
      }
      if (list.length == 2) {
        //两条数据 则 视为 答题完成 可以进入下一题
        // debugger
        this.canNext = !this.canNext;
        console.log("canNext");
      }
    },
    gameOver() {
      this.gameStop = true;
      this.stopTimeCount = !this.stopTimeCount;
      this.initTimeCount = !this.initTimeCount;
      this.showTime = false;
      this.showAnsList = false;
      if (this.isRank) {
        this.showResult = false;
        this.showHead = false;
      } else {
        this.showResult = true;
      }
      this.oRun = true;
      this.gameResult.otherScore = 0;
      // console.log(this.showAnsList);
    }
  },
  methods: {
    ...mapMutations(["setUserOneState", "setUserTwoState", "setCw"]),
    getInfo() {
      //获取列表
      if (this.userList) {
        for (let i = 0; i < this.userList.length; i++) {
          if (this.userList[i].basicInfo.userId == this.appInfo.userId) {
            this.myInfo = this.userList[i];
          } else {
            this.otherInfo = this.userList[i];
          }
        }
      }
    },
    getCurrentQuetion() {
      let index = 0,user={};
      this.userList[0].index>this.userList[1].index?index=this.userList[1].index:index=this.userList[0].index;
      this.userList[0].basicInfo.userId==this.appInfo.userId?user=this.userList[0]:user=this.userList[1];
      this.newTime = user.restSecond;
      this.initTime = Math.ceil(user.restSecond/1000);
      this.questionIndex = index; //获取当前题目
      this.showAnsList=true;  
      this.initTimeCount=!this.initTimeCount;
      this.startTimeCount=!this.startTimeCount;
    },
    getResult() {
      // if (this.questionIndex == 4) {
      if (this.gameResult.myScore > this.gameResult.otherScore || this.oRun) {
        // this.setCw(this.cw);
        this.resultType = "胜利";
        this.giftGold = 10;
      } else if (this.gameResult.myScore < this.gameResult.otherScore) {
        this.setCw(0);
        this.resultType = "失败";
        this.giftGold = 0;
      } else if (
        this.gameResult.myScore == this.gameResult.otherScore &&
        !this.oRun
      ) {
        this.setCw(0);
        this.resultType = "平局";
        this.giftGold = 5;
      }
      // }
    },
    initAudio() {
      this.audio = wx.createInnerAudioContext();
      this.audio.src = "/static/audio/victory.mp3";
    },
    start() {
      //开始答题
      this.showTime = true;
      this.initTimeCount = !this.initTimeCount;
    },
    reStart() {
      this.$emit("reStart");
      Object.assign(this.$data, dataStack.pop());
      this.oRun = false;
      this.questionIndex = 0;
      this.showAnsList = true;
      this.showTime = true;
      this.showResult = false;
      this.gameStop = false;
      this.initTimeCount = !this.initTimeCount;
      this.otherAnsList = [0, 0, 0, 0, 0];
      this.myAnsList = [0, 0, 0, 0, 0];
      this.gameResult = {
        otherScore: 0,
        myScore: 0
      };
    },
    ansStart() {
      this.startTimeCount = !this.startTimeCount;
    },
    toEntry() {
      this.$router.push("/pages/gameReview/index");
      this.$emit("back");
    },
    setUserId(obj) {
      obj.data.uid = this.appInfo.userId;
    },
    questionOk(res) {
      //当前题目答完  清空计时器，暂停进度条
      // this.otherScore = null;//清空上一条数据
      this.stopTimeCount = !this.stopTimeCount;
      if (this.questionIndex < 4) {
        setTimeout(() => {
          this.initTimeCount = !this.initTimeCount;
          this.questionIndex++; //题目增加
          this.isReLink=false;
          this.initTime=10;
        }, 2000);
      } else if (this.questionIndex == 4) {
        this.stopTimeCount = !this.stopTimeCount;
        setTimeout(() => {
          this.$emit("end");
          this.initTimeCount = !this.initTimeCount;
          this.showHead = false;
          this.showTime = false; //隐藏定时器
          this.showAnsList = false;
        }, 1000);
      }

      this.gameResult = res;
    },
    sendNext() {
      this.$emit("nextQuestion");
    },
    answerSuccess(obj) {
      // 答题正确
      this.setUserId(obj);
      this.$emit("ansRight", obj);
    },
    answerFail(obj) {
      // 答题错误
      this.setUserId(obj);
      this.$emit("ansFail", obj);
    },
    // 动画处理
    animationStep1() {
      this.showHead = true;
    },
    animationStep2() {
      if ((this.questionIndex != 4 && !this.gameStop)||(this.questionIndex==4&&this.oldGame&&this.gameStop)) {
        this.showAnsList = true;
      } else {
        //显示结果 这里处理 排位赛的动画 阻塞   先收 -- 升星 -- 结算页出现动画 处理成 事件触发形式。父级传递结算信号，进行结算
        // setTimeout(() => {
        //   this.showResult = true;
        //   this.showCycle = true;
        //   this.step1 = true;
        //   if (this.gameResult.myScore > this.gameResult.otherScore) {
        //     this.audio.play();
        //   }
        // }, 500);
      }
    },
    selectAdvice(item) {
      this.adviceType = item.type;
    },
    submitAdvice() {
      this.fly
        .post("/feedBackUser", {
          userId: this.otherScore.uid,
          types: this.adviceType
        })
        .then(res => {
          wx.showToast({
            title: "提交成功,谢谢！",
            icon: "none"
          });
          this.showModal = false;
        });
    }
  },
  onLoad(options) {
    dataStack.push({
      ...this.$data
    });
  },
  mounted() {
    this.getInfo();
    this.initAudio();
    if(this.oldGame){
      this.getCurrentQuetion();
    }
    this.start();
  }
};
</script>

<style lang="scss" scoped>
.question-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.head-box {
  padding-top: 26rpx;
  margin-bottom: 50rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  img {
    position: relative;
    width: 132rpx;
    height: 132rpx;
    border: 4rpx solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: 2;
  }
}

//答題頁面-header
.round-cvs {
  position: absolute;
  left: 50%;
  top: 26rpx;
  transform: translateX(-50%);
  animation: showTime 0.08s ease forwards;
}

@keyframes showTime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.user-one,
.user-two {
  width: 200rpx;
  height: 156rpx;
  position: relative;
  display: flex;
  align-items: center;
  background: #67c29f;
  transition: all 0.16s ease;
  .info {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    padding-right: 15rpx;
    box-sizing: border-box;
    .score {
      font-size: 44rpx; // align-self: flex-end;
    }
    .name-ans {
      font-size: 30rpx;
      width: 4.5em;
      margin-bottom: 10rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      text-align: right;
    }
  }
}

.user-two {
  transform: translateX(200rpx);
  .info {
    padding-left: 15rpx;
    padding-right: 0;
    align-items: flex-start;
  }
  .name-ans {
    text-align: left !important;
  }
  .ans-list {
    right: 25rpx;
  }
}

//勝利頁面-header
.user-one {
  transform: translateX(-200rpx);
  justify-content: flex-end;
  border-top-right-radius: 1000rpx;
  border-bottom-right-radius: 1000rpx;
  img {
    margin-right: 12rpx;
  }
  .ans-list {
    left: 25rpx;
  }
}

.user-two {
  border-top-left-radius: 1000rpx;
  border-bottom-left-radius: 1000rpx;
  justify-content: flex-start;
  img {
    margin-left: 12rpx;
  }
}

.name-ans-r,
.name-ans-l {
  position: absolute;
  bottom: -50rpx;
  font-size: 30rpx;
  width: 5.5em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.name-ans-l {
  right: 0rpx;
  text-align: right;
}

.name-ans-r {
  left: 0rpx;
  text-align: left;
}

//內容
.main-conent {
  //勝利內容
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36rpx;
    font-size: 36rpx;
  }
  .btn-game,
  .btn-back {
    width: 248rpx;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    border-radius: 0.8rem;
    color: #fff;
    font-size: 36rpx;
    transition: all 0.2s ease;
    transform: scale(0);
  }
  .btn-back {
    color: #7d7d7d;
    border: 3rpx solid #dcdcdc;
    margin-left: 78rpx;
  }
  .btnActive {
    transform: scale(1);
  }
}

//user長度
.w12r {
  width: 1.2rem;
}

.w25r {
  width: 2.5rem;
}

.endStyle {
  width: 360rpx;
  height: 175rpx;
  transform: translateX(0);
  img {
    width: 148rpx;
    height: 148rpx;
  }
  .score {
    font-size: 48rpx;
  }
}

.success {
  width: 420rpx;
  height: 200rpx;
  transform: translateX(0);
  img {
    width: 172rpx;
    height: 172rpx;
  }
}

.fail {
  width: 320rpx !important;
  height: 175rpx !important;
  background-color: #d6d6d6 !important;
  img {
    width: 150rpx;
    height: 150rpx;
  }
}

// 新增 回答记录列表
.ans-list {
  width: 200rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: -50rpx;
}

.ans0 {
  width: 20rpx;
  height: 4rpx;
  background: #abadab;
}

.ans1 {
  width: 34rpx;
  height: 34rpx;
  border-radius: 50%;
  box-sizing: border-box;
  border: 4rpx solid #67c29f;
}

.ans2 {
  width: 40rpx; // height: 4rpx;
  // background: #fd5c5c;
  // border-radius: 10rpx;
  // transform: rotate(45deg);
  position: relative;
  &:after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    width: 40rpx;
    height: 4rpx;
    background: #fd5c5c;
    border-radius: 10rpx;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  &:before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    width: 40rpx;
    height: 4rpx;
    background: #fd5c5c;
    border-radius: 10rpx;
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

// 动效附加
.headIn {
  transform: translateX(0);
}

.result{
  margin-top: 100rpx;
}
.cycle-bg {
  position: relative;
  text-align: center;
  margin-bottom: 100rpx;
  .cycle-img {
    margin: 0 auto;
    width: 299rpx;
    height: 278rpx;
  }
  .rect {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    opacity: 1;
    width: 150rpx;
    height: 150rpx;
  }
  .rect-1 {
    transform: translate(-100%, -100%);
  }
  .rect-2 {
    transform: translate(0, -100%);
  }
  .rect-3 {
    transform: translate(0, 0);
  }
  .rect-4 {
    transform: translate(-100%, 0);
  }
  .hideAnimate {
    animation: show 0.01s ease forwards;
  } // 成功
}

@keyframes show {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

// 文字
.word-sh {
  position: absolute;
  width: 212rpx;
  height: 179rpx;
  top: -30rpx;
  right: 50%;
  transform: translateX(-750rpx);
  transition: all 0.2s ease;
}

.word-l {
  position: absolute;
  width: 197rpx;
  height: 186rpx;
  bottom: -30rpx;
  left: 50%;
  transition: all 0.2s ease;
  transform: translateX(750rpx);
}

.shActive {
  transform: translateX(60rpx);
}

.lActive {
  transform: translateX(-30rpx);
}

.cv {
  position: absolute;
  top: -50rpx;
  left: 50%;
  transform: translateX(50rpx) scale(1.3);
  opacity: 0;
  transition: all 0.2s ease;
  img {
    width: 109rpx;
    height: 120rpx;
  }
  .cv-number {
    font-size: 50rpx;
    font-weight: bold;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -75%);
  }
}

.cvActiv {
  transform: translateX(50rpx) scale(1);
  opacity: 1;
}

.cv2 {
  position: absolute;
  width: 43rpx;
  height: 85rpx;
  top: 50rpx;
  left: 50%;
  transform: translateX(170rpx) scale(1.3);
  opacity: 0;
  transition: all 0.2s ease;
}

.cv2Activ {
  transform: translateX(170rpx) scale(1);
  opacity: 1;
}

.word-p {
  position: absolute;
  width: 154rpx;
  height: 181rpx;
  top: -50rpx;
  right: 45%;
  transform: translate(-30rpx, 30rpx);
  opacity: 0;
  transition: all 0.2s ease;
}

.word-j {
  position: absolute;
  width: 195rpx;
  height: 201rpx;
  left: 45%;
  transition: all 0.2s ease;
  transform: translate(30rpx, -30rpx);
  opacity: 0;
  bottom: 0;
}

.word-s {
  position: absolute;
  width: 183rpx;
  height: 197rpx;
  top: -50rpx;
  right: 45%;
  transform: translate(-30rpx, 30rpx);
  opacity: 0;
  transition: all 0.2s ease;
}

.word-b {
  position: absolute;
  width: 207rpx;
  height: 174rpx;
  left: 45%;
  transition: all 0.2s ease;
  transform: translate(30rpx, -30rpx);
  opacity: 0;
  bottom: 0;
}

.pActive {
  transform: translateX(0rpx);
  opacity: 1;
}

.jActive {
  transform: translateX(0rpx);
  opacity: 1;
}

.bActive {
  transform: translateX(20rpx);
  opacity: 1;
}

// 奖励---------------------
.gift,
.gift-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  transition: all 0.2s ease;
  opacity: 0;
}

.gift {
  color: #777676;
  margin-bottom: 18rpx;
  transform: scale(1.3);
  .g-word {
    padding: 0 15rpx;
  }
  .line {
    width: 118rpx;
    height: 2rpx;
    background: #aaaaaa;
  }
}

.giftActive {
  opacity: 1;
  transform: scale(1);
}

.gift-detail {
  color: #67c29f;
  margin-bottom: 64rpx;
  img {
    width: 48rpx;
    height: 48rpx;
    margin-right: 10rpx;
  }
  .gold {
    margin-right: 80rpx;
  }
  .exp,
  .gold {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.giftDetailActive {
  opacity: 1 !important;
}

.advice {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  img {
    width: 42rpx;
    height: 38rpx;
    margin-right: 10rpx;
  }
  font-size: 30rpx;
  color: #000;
}

.advice-modal,
.advice-modal .mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.mask {
  background: rgba(#000, 0.7);
}

.modal {
  position: absolute;
  top: 223rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 582rpx;
  height: 656rpx;
  border-radius: 8rpx;
  padding: 0 60rpx;
  box-sizing: border-box;
  background: #fff;
  z-index: 15;
  background-size: 718rpx 624rpx;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: url("");
  .close {
    width: 55rpx;
    height: 55rpx;
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 78rpx;
      height: 4rpx;
      background: #aaaaaa;
    }
    &:before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    &:after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  }
  .head {
    font-size: 52rpx;
    color: #67c29f;
    font-weight: bold;
    line-height: 1;
    padding: 48rpx 0 33rpx;
    text-align: center;
  }
  .content {
    font-size: 30rpx;
    color: #000;
    text-align: center;
    line-height: 1.5em;
    margin-bottom: 33rpx;
  }
  .select-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 40rpx;
    font-size: 36rpx;
    color: #67c29f;
    .select-box {
      width: 50rpx;
      height: 50rpx;
      border: 4rpx solid #aaaaaa;
      border-radius: 4rpx;
      box-sizing: border-box;
      position: relative;
      margin-right: 15rpx;
      img {
        width: 48rpx;
        height: 47rpx;
        position: absolute;
        top: -8rpx;
        right: -4rpx;
      }
    }
  }
  .advice-submit {
    width: 100%;
    height: 102rpx;
    line-height: 102rpx;
    text-align: center;
    font-size: 44rpx;
    color: #fff;
    background: #67c29f;
  }
}

//顏色
.green {
  background-color: #67c29f;
}

.gray {
  background-color: #d9d9d9;
}

.red {
  background-color: #eb7c7c;
}
</style>
